<template>
  <div class="list">
    <dv-border-box-9>
      <!-- <div id="c1"></div> -->
      <div class="productData">
        <span>产品骗</span>
        <span>日产量</span>
        <span>月产量</span>
        <span class="fixed">月计划完成率</span>
      </div>
      <PriductData></PriductData>
      <PriductData></PriductData>
      <PriductData></PriductData>
      <PriductData></PriductData>
    </dv-border-box-9>
    <div class="abc">
      <span>
        <h3>88%</h3>
        <h5>pvc完成率</h5>
      </span>
      <span>
        <h3>88%</h3>
        <h5>pvc完成率</h5>
      </span>
      <span>
        <h3>88%</h3>
        <h5>pvc完成率</h5>
      </span>
      <span>
        <h3>88%</h3>
        <h5>pvc完成率</h5>
      </span>
    </div>
    <div class="c2">
    <div id="c2"></div>
   
      
    </div>
    <div class="c1">
       <div id="c1"></div>

    </div>
  </div>
</template>

<script>
import { Chart } from "@antv/g2";
import PriductData from "./ProductData.vue";
export default {
  components: {
    PriductData,
  },
  mounted() {
  
    function fn1() {
      const data = [
        { time: "03-19", type: "101-1000", value: 32000 },
        { time: "03-19", type: "31-100", value: 30000 },
        { time: "03-19", type: "11-30", value: 27000 },
        { time: "03-19", type: "1-10", value: 24000 },
        { time: "03-20", type: "101-1000", value: 35000 },
        { time: "03-20", type: "31-100", value: 32000 },
        { time: "03-20", type: "11-30", value: 30000 },
        { time: "03-20", type: "1-10", value: 27000 },
        { time: "03-21", type: "101-1000", value: 39000 },
        { time: "03-21", type: "31-100", value: 37000 },
        { time: "03-21", type: "11-30", value: 34000 },
        { time: "03-21", type: "1-10", value: 30000 },
        { time: "03-22", type: "101-1000", value: 44000 },
        { time: "03-22", type: "31-100", value: 42000 },
        { time: "03-22", type: "11-30", value: 38000 },
        { time: "03-22", type: "1-10", value: 34000 },
        { time: "03-23", type: "101-1000", value: 47000 },
        { time: "03-23", type: "31-100", value: 44000 },
        { time: "03-23", type: "11-30", value: 40000 },
        { time: "03-23", type: "1-10", value: 36000 },
        { time: "03-24", type: "101-1000", value: 48000 },
        { time: "03-24", type: "31-100", value: 46000 },
        { time: "03-24", type: "11-30", value: 42000 },
        { time: "03-24", type: "1-10", value: 38000 },
        { time: "03-25", type: "101-1000", value: 50000 },
        { time: "03-25", type: "31-100", value: 48000 },
        { time: "03-25", type: "11-30", value: 44000 },
        { time: "03-25", type: "1-10", value: 38000 },
      ];

      const chart = new Chart({
        container: "c2",
        autoFit: true,
        height: 200,
      });
      chart.data(data);
      chart.scale("value", {
        alias: "金额(元)",
      });
      chart.axis("time", {
        tickLine: null,
      });

      chart.axis("value", {
        label: {
          formatter: (text) => {
            return text.replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
          },
        },
        title: {
          offset: 80,
          style: {
            fill: "#aaaaaa",
          },
        },
      });
      chart.legend({
        position: "right",
      });

      chart.tooltip({
        shared: true,
        showMarkers: false,
      });
      chart.interaction("active-region");

      chart
        .interval()
        .adjust("stack")
        .position("time*value")
        .color("type", ["#40a9ff", "#1890ff", "#096dd9", "#0050b3"]);

      chart.render();
    }
    function fn(){
       const data = [
        { time: "03-19", type: "101-1000", value: 32000 },
        { time: "03-19", type: "31-100", value: 30000 },
        { time: "03-19", type: "11-30", value: 27000 },
        { time: "03-19", type: "1-10", value: 24000 },
        { time: "03-20", type: "101-1000", value: 35000 },
        { time: "03-20", type: "31-100", value: 32000 },
        { time: "03-20", type: "11-30", value: 30000 },
        { time: "03-20", type: "1-10", value: 27000 },
        { time: "03-21", type: "101-1000", value: 39000 },
        { time: "03-21", type: "31-100", value: 37000 },
        { time: "03-21", type: "11-30", value: 34000 },
        { time: "03-21", type: "1-10", value: 30000 },
        { time: "03-22", type: "101-1000", value: 44000 },
        { time: "03-22", type: "31-100", value: 42000 },
        { time: "03-22", type: "11-30", value: 38000 },
        { time: "03-22", type: "1-10", value: 34000 },
        { time: "03-23", type: "101-1000", value: 47000 },
        { time: "03-23", type: "31-100", value: 44000 },
        { time: "03-23", type: "11-30", value: 40000 },
        { time: "03-23", type: "1-10", value: 36000 },
        { time: "03-24", type: "101-1000", value: 48000 },
        { time: "03-24", type: "31-100", value: 46000 },
        { time: "03-24", type: "11-30", value: 42000 },
        { time: "03-24", type: "1-10", value: 38000 },
        { time: "03-25", type: "101-1000", value: 50000 },
        { time: "03-25", type: "31-100", value: 48000 },
        { time: "03-25", type: "11-30", value: 44000 },
        { time: "03-25", type: "1-10", value: 38000 },
      ];

      const chart = new Chart({
        container: "c1",
        autoFit: true,
        height: 200,
      });
      chart.data(data);
      chart.scale("value", {
        alias: "金额(元)",
      });
      chart.axis("time", {
        tickLine: null,
      });

      chart.axis("value", {
        label: {
          formatter: (text) => {
            return text.replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
          },
        },
        title: {
          offset: 80,
          style: {
            fill: "#aaaaaa",
          },
        },
      });
      chart.legend({
        position: "right",
      });

      chart.tooltip({
        shared: true,
        showMarkers: false,
      });
      chart.interaction("active-region");

      chart
        .interval()
        .adjust("stack")
        .position("time*value")
        .color("type", ["#40a9ff", "#1890ff", "#096dd9", "#0050b3"]);

      chart.render();
    }
  fn()
    fn1()
  },
};
</script>

<style>
.c2{
  margin-top: 20px;
}
.c1{
  margin-top: 20px;
}
.abc {
  display: flex;
}
.abc span {
  flex: 1;
  text-align: center;
}
.abc span h3 {
  font-size: 30px;
  color: #6ff;
}
.list {
  width: 100%;
  height: 100%;
}
.list .dv-border-box-9 {
  width: 100%;
  height: auto;
  position: relative;
  padding: 20px;
  box-sizing: border-box;
}
#c1 {
  width: 100%;
  height: 100%;
}
.productData {
  width: 100%;
  display: flex;
  /* justify-content: space-between; */
}

.productData .fixed {
  flex: 40%;
}
.productData span {
  flex: 1;
  text-align: center;
}
.product:nth-child(2),
.product:nth-child(4) {
  background: rgba(0, 255, 255, 0.6);
}
</style>